<app-topbar></app-topbar>
<div class="uk-container uk-container-center">
  <app-header></app-header>
  <app-navbar></app-navbar>
</div>
<div class="crumb-wrapper">
  <div class="uk-container uk-container-center">
    <app-cat-nav></app-cat-nav>
  </div>
</div>
<div class="goods-detail uk-margin-top">
  <div class="uk-container uk-container-center">
    <div class="grid grid-small">
      <div class="width-2-5">
        <app-goods-slidershow [images]="images"></app-goods-slidershow>
      </div>
      <!--右侧商品详情开始-->
      <div class="width-3-5">
        <div class="goods-detail-right">
          <div class="item">
            <h5>【黑色键盘套装】微软（Microsoft）Surface Pro 4 （Intel i5 8G内存 256G存储                          触控笔预装Win10）</h5>
            <span class=""
                  title="京东自营】 黑色键盘套装（套装内一个键盘以赠品方式配送">
              【京东自营】        黑色键盘套装（套装内一个键盘以赠品方式配送</span>
            <a href="">点击购买自营同款型号>>></a>
          </div>
          <!--商品活动开始-->
          <div class="activity">
            <div class="activity-banner">
              <span class="activity-type">
                <i class="iconfont">&#xe62f;</i>
                京东秒杀</span>
              <span class="activity-message">预计14：00开始</span>
            </div>
            <div class="summary-price">
              <span class="jd-price">京东价</span>
              <div class="dd">
                <b>¥7888</b>
                <a href="">降价通知</a>
              </div>
              <div class="comment">
                <span>累计评价</span>
                <a href="">1万+</a>
              </div>
            </div>
            <div class="grid sales grid-collapse">
              <div class="width-1-10">
                <span>促销</span>
              </div>
              <div class="width-9-10" appHoverShow>
                <div class="gift">
                  <a href="" class="red-border">赠品</a>
                  <img src="/assets/img/zengpin.jpg" alt="">
                  <span> * 1</span> <span class="gift-limit">(赠完即止)</span>
                </div>
                <div class="hover-hide">
                  <span class="red-border">换购</span>
                  <span class="red-border">换购</span>
                  <div class="open-sales">
                    展开促销 <i class="iconfont">&#xe650;</i>
                  </div>
                </div>
                <div class="parent-show">
                  <div class="hover-show">
                    <div class="buy">
                      <span class="red-border">换购</span>
                      <span>购买1件可优惠换购热销商品</span>
                      <a href="">立即换购
                        <i class="iconfont">&#xe61e;</i>
                        <i class="iconfont">&#xe61e;</i>
                      </a>
                    </div>
                    <div class="buy">
                      <span class="red-border">换购</span>
                      <span>购买1件可优惠换购热销商品</span>
                      <a href="">立即换购
                        <i class="iconfont">&#xe61e;</i>
                        <i class="iconfont">&#xe61e;</i>
                      </a>
                    </div>
                    <div class="uk-margin-top">
                      <i class="iconfont"></i>
                      <span>"换购" 仅可在购物车任选其一</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--商品活动end-->
          <!--增值业务到无理由退换货部分开始-->
            <div class="choose-wrap">
              <div class="grid grid-collapse zengzhi">
                <div class="width-1-10">
                  <span>增值业务</span>
                </div>
                <div class="width-9-10">
                  <app-tooltip>
                    <span data-button>以旧换新，闲置回收</span>
                    <div data-content class="uk-tooltip uk-tooltip-top">
                      <span>免费提供闲置物品回收服务</span>
                    </div>
                  </app-tooltip>
                </div>
              </div>
            <div class="grid grid-collapse uk-margin-top distribution">
              <div class="width-1-10">
                <span>配送至</span>
              </div>
              <div class="width-9-10">
                <div class="app-address" appHoverShow>
                  <app-address (addrSelected)="detailAddress($event)" ></app-address>
                  <span *ngIf="address.province">
                    {{address.province}} {{address.city}} {{address.county}}
                    <i class="iconfont">&#xe650;</i>
                  </span>
                  <span *ngIf="!address.province">请选择
                    <i class="iconfont">&#xe650;</i>
                  </span>
                </div>
                <div class="dispatch-detail">
                  <div class="store-prompt">
                    <strong>有货</strong>
                    <span>，仅剩4件</span>
                    <span>支持</span>
                  </div>
                  <div class="serve">
                    <a href="">99元免基础运费(10kg内)</a>
                    <a href="">货到付款</a>
                    <a href="">次日达</a>
                    <a href="">自提</a>
                  </div>
                </div>
                <div class="uk-margin-top send-goods">
                  由 <span>京东</span> 发货，
                  <a href="">微软官方自营旗舰店</a>
                  提供售后服务。23:00前下单,预计
                  <strong>明天(06月24日)</strong> 送达
                </div>
              </div>
            </div>
            <div class="grid grid-collapse uk-margin-top">
              <div class="width-1-10">
                <span>重量</span>
              </div>
              <div class="width-9-10">
                <span>2.1KG</span>
              </div>
            </div>
              <div class="dashed"></div>
            <div class="grid grid-collapse uk-margin-top">
              <div class="width-1-10">
                <span>套装</span>
              </div>
              <div class="width-9-10">
                <span class="coordinates">内存卡套装</span>
              </div>
            </div>
             <app-extended-warranty></app-extended-warranty>
              <div class="dashed"></div>
            <div class="uk-margin-top">
              <div class="input-text">
                <input type="number" [(ngModel)]="quantity" (change)="changeQuantity(quantity)"/>
                <span class="plus" (click)="plusQuantity()">+</span>
                <span class="minus" (click)="minusQuantity()">-</span>
              </div>
              <button type="submit" (click)="onAddToCart(product)" class="uk-button uk-button-danger uk-button-large">加入购物车</button>
            </div>
            <div class="uk-margin-top">
              温馨提示  支持7天无理由退换货
            </div>
          </div>
          <!--增值业务无理由退换货部分end-->
        </div>
      </div>
      <!--右侧商品详情结束-->
    </div>
  </div>
</div>

